<%@ page contentType="text/html;charset=UTF-8" %>

<html>
  <head>
    <link rel="stylesheet" href="${resource(dir: 'css', file: 'chromosomePrint.css')}" type="text/css" />
  </head>
  <body>
    <div class="chrom-mapping">
      <img src="../../images/chromosomes/${Organism.name}/big/${Chromosome}.jpg" alt="Chromosome ${Chromosome}" style="height:${(Ranges.size()*6)+40}px;"/>
      <div class="bars" style="height:${(Ranges.size()*6)+40}px;">
        <g:set var="barNr" value="${0}" />
        <g:each in="${Ranges.keySet()}" var="range">
          <a style="top:${barNr*6}px;" >
            <div class="bar" onclick="showProteinTable();" style="width:${(Ranges[range]['all']/Scale).toInteger()}px;">
              <g:each in="${Projects}" var="proj">
                <div class="found proj${proj.id}" style="width:${(Ranges[range][proj.id]['identified']/Scale).toInteger()}px; background-color:${Colors[proj.id]}; z-index:${1000-Ranges[range][proj.id]['identified']}">
                  </div>
              </g:each>
            </div>
          </a>
          <g:set var="barNr" value="${barNr+1}" />
        </g:each>
        <div class="reference" style="width:${((((Max/10)+1).toInteger()*10)/Scale).toInteger()+1}px;">
          <g:each in="${0..(Math.floor(Max/10)+1)}" var="i">
            <div class="sep<g:if test="${(i%10==0)||((Math.floor(Max/10)+1)==i)}"> labeled</g:if>" style="left:${((i*10)/Scale).toInteger()}px;"><g:if test="${(i%10==0)||((Math.floor(Max/10)+1)==i)}"><div class="reflabel">${i*10}</div></g:if></div>
          </g:each>
        </div>
      </div>
      <div class="legend">
        <g:each in="${Projects}" var="proj">
          <div class="project">
            <div class="color" style="background-color: ${Colors[proj.id]}"></div>
            <div class="projectName">${proj.name}</div>
          </div>
        </g:each>
      </div>
    </div>
  </body>
</html>